<template>
  <!-- 
    函数式组件：
      1.function: true
      2.无状态、无示例、无 this 上下文、无生命周期
      3.一般作展示使用
   -->
  <div>
    <!-- 实现模板的临时变量 -->
    <TempVar
      :var1="`hello ${userName}`"
      :var2="flag ? 'hello vue' : 'hello world'"
    >
      <template v-slot="{ var1, var2 }">
        {{ var1 }}
        <br />
        {{ var2 }}
      </template>
    </TempVar>
  </div>
</template>
<script>
import TempVar from "./TempVar";

export default {
  components: { TempVar },
  data() {
    return { userName: "Alomy", flag: false };
  },
};
</script>
